<template lang="">
  <div class="content">
    <div class="main">
      <div class="search" style="border: 0px solid #000;height: auto;padding: 20px;background-color: #fff;">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
            <div class="left" style="text-align: left;">
              <el-select v-model="contractType" placeholder="选择合同类型" @input="selectContractType()" clearable>
                <el-option label="销售合同" value="0"></el-option>
                <el-option label="采购合同" value="1"></el-option>
                <el-option label="合作协议" value="2"></el-option>
              </el-select>
              <el-select v-model="contractStatus" placeholder="选择合同状态" @input="selectContractStatus()" clearable>
                <el-option label="未签订" value="0"></el-option>
                <el-option label="已签订" value="1"></el-option>
                <el-option label="已完成" value="2"></el-option>
                <el-option label="已作废" value="3"></el-option>
              </el-select>
              <el-input suffix-icon="el-icon-search" v-model="contractName" placeholder="请输入合同名称"
                @input="contractNameInput()"
                style="height: 40px;width: 200px;border-radius: 50px;overflow: hidden;margin-left: 20px;">
              </el-input>
              <div class="bottom">
                <p style="font-size: 16px;color: #666;margin-left: 20px;">
                  合同数量<span style="color:#fe0100;">{{total}}</span>份</p>   
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
            <div class="right" >
              <div class="top" style="text-align: right;">
                <el-button @click="goto" type="danger" class="button">创建合同</el-button>
                <el-button @click="deleteRow()" type="danger" class="button">删除</el-button>
              </div>
              
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="tabs">
        <el-table border ref="singleTable" highlight-current-row :data="contractList" tooltip-effect="dark"
          style="width: 100%;cursor: pointer;" @row-click="rowClick" @row-dblclick="handleSelectionChange">
          <el-table-column type="index" width="55" label="序号" align="center">
          </el-table-column>
          <el-table-column prop="contractName" label="合同名称" width="300" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#161616;">
                {{ scope.row.contractName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="contractNumber" label="合同编号" width="200" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contractAmount" label="合同金额" width="150" align="right" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color:#fe0100;">
                <!-- ￥{{scope.row.expecteEarn}} -->
                {{ (parseFloat( scope.row.contractAmount)).toLocaleString('zh-CN', { style: 'currency', currency:
                'cny', currencyDisplay: 'symbol' })}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="customName" label="客户名称" width="170" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="firstRepresentative" label="客户代表人" width="110" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contractDate" label="合同签订日期" width="120" align="center" :formatter="dateFormat"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="contractStatus" label="状态" width="70" align="center" :formatter="statusFormat"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="contractType" label="类型" width="90" align="center" :formatter="typeFormat"
            show-overflow-tooltip>
          </el-table-column>

          <el-table-column prop="principalName" label="负责人" width="70" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:20px;text-align: right;" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-size="size" :page-sizes="[10, 20, 30]" :current-page="current"
          :total="total" layout="sizes,prev, pager, next">
        </el-pagination>
        <div style="margin-top: 20px">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
          <!--<el-button style="width:120px" @click="setCurrent()">取消选择</el-button>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    name: 'staff',
    inject: ['reload'],
    data() {
      return {
        contractList: [], //客户列表
        current: 1,
        size: 20,
        currentRow: null,
        itemkey: '',
        contractName: '',
        total: 0,
        contractType: null,
        contractStatus: null
      }
    },
    mounted() {
      this.getContractList()
    },
    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      dateFormat: function (row, column) {
        // debugger
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY/MM/DD");
      },
      statusFormat: function (row, column) {
        // debugger
        var key = row[column.property];
        var statusDict = { "0": "未签订", "1": "已签订", "2": "已完成", "3": "已作废" }
        if (key == undefined) {
          return "";
        }
        return statusDict[key];
      },
      typeFormat: function (row, column) {
        // debugger
        var key = row[column.property];
        var statusType = { "0": "销售合同", "1": "采购合同", "2": "合作协议" }
        if (key == undefined) {
          return "";
        }
        return statusType[key];
      },
      handleSizeChange(val) {
        // alert(`每页 ${val} 条`);
        this.size = val
        this.getContractList()
      },
      handleCurrentChange(val) {
        this.current = val
        this.getContractList()
      },
      stateFormat(row, column) {
        if (row.staffStatus == "在职") {
          return <i class="el-icon-success" style="color:#3CB371;"></i>
        } else if (row.staffStatus == "离职") {
          return <i class="el-icon-remove" style="color:#FF0000;"></i>
        }
      },

      rowClick(row) {
        this.currentRow = row
      },
      // 删除员工
      deleteRow() {
        if (this.currentRow == null) {
          this.$message("请选择一行进行删除操作");
        } else {
          this.$confirm("确认删除合同吗？", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            var data = {
              contractId: this.currentRow.contractId
            }
            this.$API.agreement.reqDelContract(data).then(res => {
              if (res.data.code == 200) {
                this.$message.success("删除成功！");
                this.getContractList()
              } else {
                this.$message.error("删除失败！");
              }
            })
          })
        }
      },
      // 搜索
      selectContractType() {
        this.getContractList()
      },
      selectContractStatus() {
        this.getContractList()
      },
      // 获取合同
      async getContractList() {
        // 解构出参数
        const { current, size } = this;
        var data = {
          current: current,
          size: size,
        }
        if (this.contractType != "" && this.contractType != null) {
          data.contractType = this.contractType
        }
        if (this.contractStatus != "" && this.contractStatus != null) {
          data.contractStatus = this.contractStatus
        }
        if (this.contractName != "" && this.contractName != null) {
          data.contractName = this.contractName
        }
        let result = await this.$API.agreement.reqContractList(data)
        this.total = result.data.total;
        this.contractList = result.data.data
      },
      contractNameInput() {
        this.getContractList()
      },
      goto() {
        this.$router.push({
          path: '/insertAgreement'
        });
      },
      handleSelectionChange(val) {
        console.log(val)
        this.currentRow = val;
        this.$router.push({
          path: '/agreementDetails',
          name: 'agreementDetails',
          query: {
            contractId: this.currentRow.contractId,
          }
        });
      }
    }
  }

</script>
<style scoped>
  @import "../../../../style/style.css";

  .main {
    border: 0px solid #000;
    border-radius: 10px;
    overflow: hidden;
  }

  .tabs>>>.el-table th.el-table__cell {
    background-color: #f5f5f7;


  }

  .search .left {
    padding-left: 20px;
    border: 0px solid #000;
  }

  .search .left>>>.el-select .el-input {
    background-color: #f5f5f7;
    width: 200px;
    margin-left: 20px;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
  }

  .search .left>>>.el-input__icon {
    color: #000;
    font-weight: 600;
  }

  .search .left>>>.el-select .el-input .el-select__caret {
    color: #000;
  }


  .search .right {
    padding-right: 40px;
    border: 0px solid #000;
  }

  .search>>>.el-input__inner {
    background-color: #f5f5f7;
  }

  .sl {
    border-radius: 10px;
    padding: 10px 0;
    margin: 20px 0;
    margin-left: 80px;
    /* width: 200px; */
    line-height: 35px;
    background-color: #fe00000b;
  }
</style>